<template>
  <div class="zhtt-layout-wrap" :class="{debug: debugStore.debug}">
    <LayoutLeftPanel></LayoutLeftPanel>
    <LayoutEditorPanel></LayoutEditorPanel>
    <LayoutRightPanel></LayoutRightPanel>
  </div>
</template>
<script setup lang="ts">
import {useEditorDebugStore} from "@/stores/debug";
import LayoutLeftPanel from "@/components/layout/LayoutLeftPanel.vue";
import LayoutEditorPanel from "@/components/layout/LayoutEditorPanel.vue";
import LayoutRightPanel from "@/components/layout/LayoutRightPanel.vue";
const debugStore = useEditorDebugStore();
</script>
<style scoped>
.debug{
  border: 2px dotted #3eaf7c!important;
}
.zhtt-layout-wrap{
  display: flex;
  height: 100%;
  border: 1px dotted #3EAF7C;
}
</style>
